<template>
  <div style="border: 1px solid #ccc; margin-top: 10px">
    <Toolbar :editor="editorRef" style="border-bottom: 1px solid #ccc; height: 80px" />
    <Editor :defaultConfig="editorConfig" v-model="content" style="height: 300px; overflow-y: hidden"
      @onCreated="handleCreated" @customPaste="customPaste" :mode="'default'" />
  </div>
</template>

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css";
import { onBeforeUnmount, ref, shallowRef } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import type { IDomEditor } from "@wangeditor/editor";
// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();
// 内容 HTML
const content = ref<string>("")

const editorConfig = { placeholder: "请输入帖子内容..." };

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 编辑器回调函数
const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const customPaste = (editor, event, callback) => {
  // 返回值（注意，vue 事件的返回值，不能用 return）
  callback(true); // 返回 false ，阻止默认粘贴行为
  // callback(true) // 返回 true ，继续默认的粘贴行为
};

defineExpose({
  editorRef,
  content,
  handleCreated
})

</script>

<style scoped></style>
